<template>
  <div class="publish-confirmation">
    <div class="section-header">
      <div class="section-indicator"></div>
      <h4>发布确认</h4>
    </div>
    
    <div class="confirmation-content">
      <el-descriptions :column="1" border>
        <el-descriptions-item label="班级">
          <el-tag type="info">{{ className || '未选择' }}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="答题类型">
          <el-tag :type="getAnswerTypeTag(formData.answerType)">
            {{ formData.answerType || '课中' }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="开始方式">
          {{ getStartModeText(formData.startMode) }}
        </el-descriptions-item>
        <el-descriptions-item label="开始时间" v-if="formData.startTime">
          <i class="el-icon-time"></i> {{ formData.startTime }}
        </el-descriptions-item>
        <el-descriptions-item label="答题时长">
          <el-tag>{{ formData.timeLimit || 0 }} 分钟</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="截止时间" v-if="formData.deadline">
          <i class="el-icon-time"></i> {{ formData.deadline }}
        </el-descriptions-item>
        <el-descriptions-item label="题目数量">
          <el-tag type="success">{{ selectedQuestions.length }} 题</el-tag>
        </el-descriptions-item>
      </el-descriptions>
      
      <div class="selected-questions" v-if="selectedQuestions.length > 0">
        <h4 class="questions-title">
          <i class="el-icon-document"></i> 已选题目
          <span class="questions-count">(共 {{ selectedQuestions.length }} 题)</span>
        </h4>
        
        <el-table
          :data="selectedQuestions"
          style="width: 100%; margin-top: 15px;"
          border
          :show-header="false"
          :row-class-name="tableRowClassName">
          <el-table-column width="50">
            <template slot-scope="scope">
              <div class="question-index">{{ scope.$index + 1 }}.</div>
            </template>
          </el-table-column>
          <el-table-column>
            <template slot-scope="scope">
              <div class="question-content" v-html="formatQuestionContent(scope.row.questionText)"></div>
              <div class="question-answer" v-if="scope.row.answer">
                <span class="answer-label">答案：</span>
                <span v-html="formatAnswer(scope.row.answer, scope.row.type)"></span>
              </div>
              <div class="question-footer">
                <el-tag size="mini" effect="plain" class="question-type">
                  {{ scope.row.type || '未知类型' }}
                </el-tag>
                <div class="score-editor">
                  <span class="score-label">分值:</span>
                  <el-input-number 
                    v-model="scope.row.maxScore" 
                    :min="1" 
                    :max="100" 
                    size="mini" 
                    style="width: 100px"
                    @change="handleScoreChange(scope.row)">
                  </el-input-number>
                  <span class="score-unit">分</span>
                </div>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      
      <div class="confirmation-actions">
        <el-button @click="$emit('prev')" plain>上一步</el-button>
        <el-button 
          type="primary" 
          @click="handleConfirm" 
          :loading="loading"
          :disabled="selectedQuestions.length === 0">
          {{ loading ? '发布中...' : '确认发布' }}
        </el-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'PublishConfirmation',
  props: {
    formData: {
      type: Object,
      required: true
    },
    selectedQuestions: {
      type: Array,
      default: () => []
    },
    classList: {
      type: Array,
      default: () => []
    },
    loading: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    className() {
      if (!this.formData.classId) return '';
      const selectedClass = this.classList.find(item => item.classId == this.formData.classId);
      return selectedClass ? selectedClass.className : '';
    }
  },
  created() {
    // 初始化题目的maxScore值，默认使用原始分值
    if (this.selectedQuestions && this.selectedQuestions.length > 0) {
      this.selectedQuestions.forEach(question => {
        if (!question.maxScore) {
          this.$set(question, 'maxScore', question.score || 5);
        }
      });
    }
  },
  
  methods: {
    // 处理分值变更
    handleScoreChange(question) {
      console.log('题目分值变更:', question.id, question.maxScore);
      // 触发分值变更事件，将分值变更通知父组件
      this.$emit('score-change', question);
    },
    
    getAnswerTypeTag(type) {
      const typeMap = {
        '课前': 'primary',
        '课中': 'success',
        '课后': 'warning',
        '测试': 'danger'
      };
      return typeMap[type] || 'info';
    },
    
    getStartModeText(mode) {
      const modeMap = {
        'immediate': '立即开始',
        'scheduled': '定时开始',
        'manual': '点击开始'
      };
      return modeMap[mode] || mode || '立即开始';
    },
    
    formatQuestionContent(content) {
      if (!content) return '无题目内容';
      
      // 如果内容已经是HTML格式，直接返回
      if (content.includes('<') && content.includes('>')) {
        return content;
      }
      
      // 如果是纯文本，进行基本的格式化
      return content
        .replace(/\n/g, '<br>')
        .replace(/\s{2,}/g, '&nbsp;&nbsp;');
    },
    
    formatAnswer(answer, type) {
      if (!answer) return '无答案';
      
      // 根据题目类型格式化答案
      switch(type) {
        case '单选题':
        case '判断题':
          return answer;
        case '多选题':
          return answer.split(',').join('、');
        case '填空题':
          return answer.split('|').join(' 或 ');
        default:
          return answer;
      }
    },
    
    tableRowClassName({rowIndex}) {
      return rowIndex % 2 === 0 ? 'even-row' : 'odd-row';
    },
    
    handleConfirm() {
      if (this.selectedQuestions.length === 0) {
        this.$message.warning('请至少选择一道题目');
        return;
      }
      
      if (!this.formData.classId) {
        this.$message.warning('请选择班级');
        return;
      }
      
      // 将分值信息一并传到父组件
      this.$emit('confirm', this.selectedQuestions.map(q => ({
        id: q.id,
        maxScore: q.maxScore || q.score || 5
      })));
    }
  }
};
</script>

<style scoped>
.question-footer {
  display: flex;
  align-items: center;
  margin-top: 10px;
  justify-content: space-between;
}

.score-editor {
  display: flex;
  align-items: center;
}

.score-label {
  margin-right: 8px;
  color: #606266;
  font-size: 12px;
}

.score-unit {
  margin-left: 5px;
  color: #606266;
  font-size: 12px;
}
</style>

<style scoped>
.confirmation-content {
  margin-top: 20px;
}

.questions-title {
  margin: 30px 0 15px 0;
  font-size: 16px;
  color: #303133;
  display: flex;
  align-items: center;
}

.questions-title i {
  margin-right: 8px;
  color: #409EFF;
}

.questions-count {
  margin-left: 10px;
  font-size: 14px;
  color: #909399;
  font-weight: normal;
}

.question-index {
  font-weight: bold;
  color: #409EFF;
}

.question-content {
  line-height: 1.6;
  margin-bottom: 10px;
}

.question-answer {
  margin: 10px 0;
  padding: 8px 12px;
  background-color: #f5f7fa;
  border-radius: 4px;
  font-size: 14px;
}

.answer-label {
  font-weight: bold;
  color: #67C23A;
}

.question-footer {
  margin-top: 10px;
  display: flex;
  align-items: center;
}

.question-type {
  margin-right: 10px;
}

.confirmation-actions {
  margin-top: 30px;
  text-align: right;
  padding: 20px 0;
  border-top: 1px solid #ebeef5;
}

/* 表格行样式 */
:deep(.el-table .even-row) {
  background-color: #fafafa;
}

:deep(.el-table .odd-row) {
  background-color: #ffffff;
}

:deep(.el-table--border) {
  border: 1px solid #ebeef5;
}

:deep(.el-table--border th) {
  background-color: #f5f7fa;
}
</style>
